<template>
	<view class="addDevice">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="content-wrap">
			<!-- <view class="qr-code">
				<view class="name"><text class="star">*</text>二维码编号</view>
				<view class="val"><input type="text" v-model="gatherParams.devicecode" /></view>
			</view> -->
			<view class="device-name">
				<view class="name"><text class="star">*</text>设施名称</view>
				<view class="val"><input type="text" v-model="gatherParams.devicename" /></view>
			</view>
			<view class="pollution-production">
				<view class="name"><text class="star">*</text>设施类型</view> <!-- devicetype -->
				<view class="val"> <uni-data-select class="two" placeholder="请选择" v-model="gatherParams.devicetype"
						:localdata="range"></uni-data-select> </view>
			</view>
			<!-- <view class="waste">
				<view class="name"><text class="star">*</text>废气处理工艺</view>
				<view class="val"><input type="text" /></view>
			</view> -->
			<view class="feiqi">
				<view class="name"><text class="star">*</text>
					<view class="text">处理设计风量(m³/h)</view>
				</view>
				<view class="val"><input type="text" v-model="gatherParams.designairvolume" /></view>
			</view>
			<view class="feiqi width">
				<view class="name"><text class="star">*</text>
					<view class="text">设计使用量(kg)</view>
				</view>
				<view class="val"><input type="text" v-model="gatherParams.designusenum" /></view>
			</view>
			<view class="waste">
				<view class="name"><text class="star">*</text>更换周期(天)</view>
				<view class="val"><input type="text" v-model="gatherParams.recircledays" /></view>
			</view>
			<view class="waste">
				<view class="name"><text class="star">*</text>安装位置</view>
				<view class="val"><input type="text" v-model="gatherParams.installposition" /></view>
			</view>
			

		</view>
		<view class="btn-wrap">
			<button @click="save">保存</button>
		</view>

	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import http from '../../request/index.js'
	import {
		reactive,
		ref
	} from 'vue'
	let name = "新增"
	let value = ref('')
	let gatherParams = reactive({
		devicetype: '0'
	})
	let range = ref([])
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B03'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			range.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})

		}

	})
	let save = () => {
		console.log(gatherParams, 'gatherParams')
		let keys = Object.keys(gatherParams)
		if (keys.length !== 6) {
			uni.showToast({
				title: '请完整填写内容',
				icon: "none"
			})
			return
		}
		http({
			url: '/device/addOrUpdateDevice',
			data: gatherParams
		}).then((res) => {
			if (res.code == 0) {
				uni.showToast({
					title: '新增成功',
					icon: "success",
					mask: true
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
			console.log(res, '1');
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.uni-select__input-text) {

		font-weight: 400 !important;
		font-size: 31rpx !important;
		color: #333333 !important;

	}

	:deep(.uni-select) {
		height: 56rpx;
		width: 100%;
		border: none;
		padding-left: 0rpx;

	}

	.addDevice {
		width: 100vw;
		height: 100vh;
		padding-top: 160rpx;


		.title-bgc {
			background: #0874FA;
			height: 160rpx;
			width: 100vw;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
		}

		.btn-wrap {
			padding: 63rpx 39rpx 68rpx 39rpx;

			button {
				width: 100%;
				height: 88rpx;
				background: #0874FA;
				border-radius: 44rpx;

				font-weight: 500;
				font-size: 31rpx;
				color: #FFFFFF;
				line-height: 88rpx;

			}
		}

		.content-wrap {
			padding: 38rpx 28rpx 0 28rpx;

			view:first-child {
				margin-top: 0rpx !important;
			}

			.width {
				.name {
					.text {
						width: 140rpx !important;
					}
				}
			}

			.feiqi {
				height: 60rpx;
				margin-top: 34rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.name {
					display: flex;

					.text {
						width: 170rpx;
						font-weight: 400;
						font-size: 31rpx;
						color: #000000;

					}

					.star {
						color: #F82A24
					}
				}

				.val {
					width: 491rpx;
					height: 100%;
					background: #FAFAFA;
					border-radius: 7rpx;
					border: 1px solid #BFBFBF;
					flex-shrink: 0;
					padding-left: 52rpx;

					input {
						height: 100%;
					}
				}
			}

			.qr-code,
			.device-name,
			.pollution-production,
			.waste {
				height: 60rpx;

				display: flex;
				justify-content: space-between;
				margin-top: 36rpx;
				align-items: center;

				.name {

					font-weight: 400;
					font-size: 31rpx;
					color: #000000;
					flex-wrap: wrap;

					.star {
						color: #F82A24
					}

				}

				.val {
					width: 491rpx;
					height: 100%;
					background: #FAFAFA;
					border-radius: 7rpx;
					border: 1px solid #BFBFBF;
					flex-shrink: 0;
					padding-left: 55rpx;

					input {
						height: 100%;
					}
				}
			}
		}


	}
</style>